<template>
	<view>
		<uni-nav-bar fixed="true" :border="false">
			<view class="slot-wrap" style="margin: 0 auto;">
				<view class="search-box u-flex">
					<view class="search-input-box u-flex align-center">
						<view class="img-box">
							<image class="image100" src="/static/indexImages/searchicon.png" mode=""></image>
						</view>
						<view class="flex_alitm">
							<input v-model="keyword" type="text" style="font-size: 14px;" placeholder="搜你想要的商品">
						</view>
						<view class="search-btn" @click="handSearch">
							<text>搜索</text>
						</view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content">
			<!-- 正文内容 -->
			<!-- 轮播图 -->
			<view class="wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item ,index ) in bannerlist" :key="index">
						<view class="swiper-item uni-bg-red">
							<image :src="item.pic" mode=""></image>
						</view>
					</swiper-item>

				</swiper>
				<!-- <uni-swiper :list="bannerlist"></uni-swiper> -->
			</view>
			<!-- 金刚区 -->
			<!-- <view class="tab_box d-flex justify-space-between mt-4">
				<view class="tab_item flex-column justify-center align-center" v-for="(item , index) in tabs" :key="index+'tab'" @click="handTab(item)">
					<image class="mb-2" :src="item.image" mode=""></image>
					<view><text>{{item.name}}</text></view>
				</view>
			</view> -->
			<!-- 号卡精选 -->
			<view class="title-box mt-4">
				<view class=" d-flex align-center  mb-4">
					<text class="u-title font-bold font-18 mr-4">号卡精选</text>
					<view class="title-des">
						<text>猜你喜欢</text>
					</view>
				</view>
				<view class="product-item mb-4" v-for="(item , index) in products" :key="index+'pro'">
					<view class="" style="display: flex;margin-bottom: 10px;">
						<view class=""
							style=" margin-top: 4px;background: rgb(238, 244, 250);border-radius: 5px;padding: 10rpx;">
							{{item.in_name}}
						</view>
					</view>
					<view class="  d-flex">

						<view class="product-image-box mr-2">
							<image class="banner" :src="item.main_pic" mode="">

							</image>
							<image class="ranking" v-if="item.ranking==1" src="../../static/indexImages/top1.png"
								mode=""></image>
							<image class="ranking" v-if="item.ranking==2" src="../../static/indexImages/top2.png"
								mode=""></image>
							<image class="ranking" v-if="item.ranking==3" src="../../static/indexImages/top3.png"
								mode=""></image>
						</view>
						<view class="product-conten">
							<view class="d-flex align-center">
								<!-- <text class="font-bold font-18 mr-4">{{item.in_name}}</text> -->
								<view class="d-flex copy align-center" @click="handCopy(item.id)">
									<text class="mr-2">商品ID:{{item.id}}</text>
									<image class="copyimage" src="../../static/indexImages/copy.png" mode=""></image>
								</view>
							</view>
							<!-- <view class="d-flex align-center describe mt-1">
								<text>{{item.tishi}}</text>
							</view>
							<view class="font-bold d-flex align-center flow mt-2">
								<text>{{item.monthly}}</text>
								<text class="Verticalline mr-2 ml-2"></text>
								<text>{{item.flow}}</text>
							</view> -->
							<view class="mt-3 d-flex align-center u-flex-wrap">

								<view class="mr-1 tag-item warning" v-if="!isEmpty(item.main_recomm)">
									{{item.main_recomm}}</view>
								<view class="mr-1 tag-item primary" v-if="!isEmpty(item.belong_place)">
									{{item.belong_place}}</view>
								<view class="mr-1 tag-item error" @click="handTag(item.bans_area)">
									<!-- {{item.bans_area}} -->
									禁发区域
									<text>></text>
									<u-icon name="arrow-right" color="#F93A4A" size="28"></u-icon>
								</view>
							</view>
							<view class="mt-4 d-flex align-center justify-space-between" style="display: contents;">
								<view class="d-flex price align-end">
									<text>¥</text>
									<!-- <text class="font-20">{{item.goods_price}}/</text> -->
									<text class="font-20">佣金:{{item.own_money || 0.00}}</text>
									<!-- <text class="font-20">产品特性:{{item.product_teaus}}</text> -->

									<!-- <text  class="font-20" v-if="isEmpty(item.unit)">{{item.unit}}</text> -->
									<!-- <text  class="font-20" >月</text> -->
								</view>
								<view class="d-flex price align-end" v-if="!isEmpty(item.product_teau)">
									<text class="font-14">产品特性:{{item.product_teau}}</text>

								</view>
								<!-- <view class="button ml-2"  @click="dumpPage('/pages/goodsDetail/goodsDetail',{id:item.id},'to')">
									立即申请
								</view> -->
							</view>

						</view>
					</view>
					<view class="tc-describe mt-2 pt-2"
						@click="handPackageDescription(item.pack_desc,item.commission_desc)">
						<view class="d-flex align-center">

							<uni-icons type="info-filled" color="#ABABAB" size="20"></uni-icons>
							<text class="tc-title mr-1 ml-1">套餐说明:</text>
							<text class="ellipsis-container">{{item.pack_desc}}</text>
							<uni-icons type="right" color="#ABABAB" size="20"></uni-icons>

						</view>
					</view>
					<view class="" style="display: flex;">
						<view class="mr-1 boxGoods" @click="editGoodsFn(item)">
							编辑
						</view>
						<view class="mr-2 boxGoods" style="color: rgb(222, 142, 143);" @click="xiajia(item.id)">
							下架
						</view>
						<view class="mr-2 boxGoods" @click="handAddagent(item.id)">
							专属链接
						</view>
						<view class="mr-2 boxGoods" @click="Generateposter(item)">
							生成海报
						</view>
						<view class="mr-2 boxGoods" style="color: #1456FE;"
							@click="allFenyong(item.id,item.commission_money)">
							普通批量分佣
						</view>
					</view>
				</view>
				<page-empty con="暂无商品~" v-if="isEmpty(products)"></page-empty>

			</view>
			<!-- <view class="container" style="width: 100px;height: 100px;margin-left: 70%;">
				<view class="floating-window">
					<uv-button type="error" text="分享店铺" @click="closePop()"
						style="width: 100%;margin-left: 5%;background-color: #1456FE;"></uv-button>
				</view>
			</view> -->
		</view>
		<!-- 套餐 -->
		<view class="">
			<uv-popup round="12" ref="popupTaochan" mode="center" :close-on-click-overlay="false">
				<view class="popupTaochan" style="">
					<uv-form labelPosition="left" labelWidth="100">
						<view class="popupTaochan-top">
							<image src="../../static/12.png" mode=""></image>
							<text class="">
								套餐说明和分佣模式
							</text>

						</view>
						<view class="popupTaochan-dic d-flex align-center mt-8">
							<text class="popupTaochan-dic-title">套餐说明：</text>
							<text class="popupTaochan-dic-con">{{pack_desc}}</text>
						</view>
						<view class="popupTaochan-dic d-flex  mt-8">
							<text class="popupTaochan-dic-title">分佣模式：</text>
							<text class="popupTaochan-dic-con">{{commission_desc}}</text>
						</view>
						<view class="d-flex mt-6 justify-center">
							<uv-button type="success" text="我知道了" @click="propTaochanSubmit()"></uv-button>
						</view>
					</uv-form>
				</view>
			</uv-popup>
		</view>
		<!-- 编辑 -->
		<view class="">
			<uv-popup ref="popupBianji" mode="center" :close-on-click-overlay="false">
				<view class="" style="width: 650rpx;margin: 10px 10px 10px 10px;">
					<uv-form labelPosition="left" labelWidth="100" :model="form" ref="form">
						<text class="css-text-bold css-text-lg">
							最多申请{{totle_money}}额度
						</text>
						<view>
							<uv-form-item label="申请额度:" prop="cash_money">
								<uv-input v-model="form.cash_money" placeholder="请输入申请提现的金额" border="surround" />
							</uv-form-item>
						</view>
						<view style="display: flex;margin-bottom: 10px;margin-right: 1%;">
							<uv-button type="error" text="立即提交" @click="cashSubmit()"
								style="width: 40%;margin-right: 10%;margin-left: 5%;"></uv-button>
							<uv-button type="error" text="取消" @click="closePop()"
								style="width: 40%;margin-left: 5%;"></uv-button>
						</view>
					</uv-form>
				</view>
			</uv-popup>
		</view>
		<!-- 生成海报 -->
		<view class="">
			<!-- <uv-popup ref="popupPoster" mode="center"  :close-on-click-overlay="false">
				<view class="" style="width: 650rpx;margin: 10px 10px 10px 10px;">
					<uv-form labelPosition="left" labelWidth="100" :model="form" ref="form">
						<text class="css-text-bold css-text-lg">
							最多申请{{totle_money}}额度
						</text>
						<view>
							<uv-form-item label="申请额度:" prop="cash_money">
								<uv-input v-model="form.cash_money" placeholder="请输入申请提现的金额"
									border="surround" />
							</uv-form-item>
						</view>
						<view style="display: flex;margin-bottom: 10px;margin-right: 1%;">
							<uv-button type="error" text="立即提交" @click="cashSubmit()" style="width: 40%;margin-right: 10%;margin-left: 5%;"></uv-button>
							<uv-button type="error" text="取消" @click="closePop()" style="width: 40%;margin-left: 5%;"></uv-button>
						</view>
						</uv-form>
				</view>
			</uv-popup> -->
			<uni-popup ref="popupPoster" closeable border-radius="10px">
				<view class="">
					<view class="Posterpopup" id="Posterbox" style="" ref="Posterbox">
						<view class=" d-flex justify-center">
							<image class="Posterpopup-image" :src="rowOne.main_pic" mode=""></image>
						</view>
						<view class="ml-4 mt-6">
							<text style="color: #fff" class="mb-2">{{rowOne.in_name}}</text>
							<view class="">
								<text style="color: #fff;">{{rowOne.tishi}}</text>
							</view>
						</view>
						<view class="Posterpopup-code">
							<tki-qrcode :val="qrcodeUrl" :size="248" :onval="true" :load-make="true" />
							<!-- <canvas id="qrcodecode" canvas-id="qrcodecode" style="width: 200px;height: 200px;"></canvas> -->
						</view>
					</view>
					<view class=" mt-4 d-flex">
						<button size="mini" type="default" @click="PosterCancel">取消</button>
						<button size="mini" type="primary" @click="Posterdownx">生成图片</button>
					</view>
				</view>

			</uni-popup>
		</view>
		<!-- 佣金调整 -->
		<view class="">
			<uv-popup ref="popupCommiss" mode="center" :close-on-click-overlay="false">
				<view class="" style="width: 650rpx;margin: 10px 10px 10px 10px;">
					<uv-form labelPosition="left" labelWidth="100" :model="form" ref="form">
						<text class="css-text-bold css-text-lg">
							最多申请{{totle_money}}额度
						</text>
						<view>
							<uv-form-item label="申请额度:" prop="cash_money">
								<uv-input v-model="form.cash_money" placeholder="请输入申请提现的金额" border="surround" />
							</uv-form-item>
						</view>
						<view style="display: flex;margin-bottom: 10px;margin-right: 1%;">
							<uv-button type="error" text="立即提交" @click="cashSubmit()"
								style="width: 40%;margin-right: 10%;margin-left: 5%;"></uv-button>
							<uv-button type="error" text="取消" @click="closePop()"
								style="width: 40%;margin-left: 5%;"></uv-button>
						</view>
					</uv-form>
				</view>
			</uv-popup>
		</view>

		<!-- 批量分佣弹窗 -->
		<uni-popup ref="popupPiliangfy" mode="center" :close-on-click-overlay="true" closeable border-radius="10px">
			<view class="Piliangfypopup" style="">
				<view class="title">
					<text class="">分佣(直接代理)</text>
				</view>
				<view class="Piliangfypopup-input">
					<input type="text" v-model="commission_money" placeholder="请输入" />
				</view>
				<view class="d-flex justify-space-around">
					<button size="mini" type="default" @click="submitFY">取消</button>
					<button size="mini" type="primary" @click="submitFYA">确认</button>
				</view>
			</view>
		</uni-popup>
		<!-- 禁发区域弹窗 -->
		<uv-popup ref="popupJinfa" mode="center" :close-on-click-overlay="true" closeable round="12">
			<view class="Jinfapopup" style="">
				<view class="title">
					<text class="">禁发区域</text>

				</view>
				<text class="content">{{bans_area}}</text>
			</view>
		</uv-popup>

		<!-- 号卡店铺 -->
		<view class="hk-shop" @click="handHK">
			<text>号卡店铺</text>
		</view>
		<view class="">
			<uni-popup ref="popupHK" closeable border-radius="10px">
				<view class="">
					<view class="PosterpopupHK" id="Posterbox" style="" ref="Posterbox">
						<l-painter ref="painter" css="width: 680rpx; height: 1000rpx">
							<l-painter-image src="https://download.taocarts.com/kkbuy.taocarts.com/shop.png"
								css="width: 680rpx; height: 1000rpx" />
							<l-painter-qrcode :text="qrcodeHkUrl"
								css="width: 140rpx; height: 140rpx;position: absolute;bottom:130rpx;left:80rpx" />
						</l-painter>
						<!-- <view class=" d-flex justify-center">
							<image class="PosterpopupHK-image" src="../../static/shop(1).png" mode=""></image>
						</view>
						<view class="PosterpopupHK-code">
							<tki-qrcode :val="qrcodeHkUrl" :size="160" :onval="true" :load-make="true" />
						</view> -->
					</view>
					<view class=" mt-14 d-flex" style="margin-top: 150rpx;">
						<button size="mini" type="default" @click="PosterHKCancel">取消</button>
						<button size="mini" type="primary" @click="Posterdown">生成图片</button>
					</view>
				</view>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/common/auth';
	import UQRCode from 'uqrcodejs';
	import html2canvas from 'html2canvas';
	import tkiQrcode from 'tki-qrcode'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'

	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				title: 'Hello',
				keyword: '',
				background: {
					background: '#fff'
				},
				bannerlist: [ //轮播图数据
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabs: [ //金刚区数据
					{
						id: 0,
						name: '选靓号',
						image: ('../../static/indexImages/selectTel.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 1,
						name: '办套餐',
						image: ('../../static/indexImages/Package.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 2,
						name: '生日号',
						image: ('../../static/indexImages/birthday.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 3,
						name: '宽带办理',
						image: ('../../static/indexImages/broadband.png'),
						path: '', //如果要跳转页面的话
					},
					{
						id: 4,
						name: '定制号',
						image: ('../../static/indexImages/customized.png'),
						path: '', //如果要跳转页面的话
					},
				],
				products: [ //产品数据
					{
						id: 658,
						image: ('../../static/indexImages/customized.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 1, //排名，如果数据是排好序的话，也可以用index判断
					},
					{
						id: 658,
						image: ('../../static/indexImages/customized.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 2, //排名，如果数据是排好序的话，也可以用index判断
					},
					{
						id: 658,
						image: ('../../static/indexImages/customized.png'),
						name: '联通新海卡',
						describe: '19元月享160G大流量',
						price: '15',
						unit: '月',
						month: '月租19元',
						flow: '160G流量',
						tag: ['大流量', '次月返', '禁发区域'],
						tip: '套餐说明套餐，说明套餐说明说明套餐说明...',
						promoter: 'bin890315',
						ranking: 3, //排名，如果数据是排好序的话，也可以用index判断
					}
				],

				customStyle: {
					color: '#fff',
					backgroundColor: '#F93A4A'
				},
				serverHost: '',
				showModal: false,
				biaoQian: ['主推', '归属地', '禁发区域'],
				qrcodeUrl: '',
				shareBg: "https://img2.baidu.com/it/u=3334525604,928778682&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703955600&t=c88ebba9f3d8aeee92c6afd219945f9a",
				pack_desc: '',
				commission_desc: '',
				bans_area: '', // 禁发区域
				rowOne: '',
				commission_money: 0,
				goods_id: 0,
				serverHost: '',
				qrcodeHkUrl: ''
			}
		},
		onShow() {
			let nowApp = getApp();
			console.log(nowApp)
			if (true === uni.$uv.getProperty(nowApp, 'globalData.reInit')) {
				getApp().globalData.reInit = false;
				console.log('重新执行init');
				this.init();
				this.goods();
			}
		},
		onReady() {

		},
		onLoad(options) {
			// console.log(options,44444444444);
			if (options.shopId) {
				// 保存当前shopId
				uni.setStorage({
					key: 'shop_id',
					data: options.shopId
				});
				uni.$my.shopId = options.shopId;
			}
			let aShopId = uni.getStorageSync('shop_id');
			if ((aShopId)) {
				uni.$my.shopId = aShopId;
			}
			this.serverHost = uni.$my.serverHost;
			this.qrcodeHkUrl = 'https://web.qqinfor.com/'+uni.$my.shopId;
			this.init();
			this.goods();
		},
		methods: {
			isEmpty(item) {
				return uni.$uv.test.empty(item)
			},
			getProperty(obj, key) {
				return uni.$uv.getProperty(obj, key);
			},
			// 搜索方法
			handSearch() {
				console.log(this.keyword);
			},
			// 点击号卡店铺
			handHK() {
				//popupHK
				this.$refs.popupHK.open('center');
				// uni.showToast({
				// 	title: '点击号卡店铺',
				// 	icon: 'none'
				// });
			},
			// 点击tab
			handTab(item) {

				if (item.id == 1) {
					this.dumpPage("/pages/goods/index");
				} else {
					uni.showToast({
						title: '开发中',
						icon: 'none'
					});
				}

			},
			// 点击套餐说明
			handPackageDescription(text, text2) {
				// uni.showToast({
				// 	title:text,
				// 	icon:'none'
				// })
				this.commission_desc = text2;
				this.pack_desc = text;
				this.$refs.popupTaochan.open('center');
			},
			propTaochanSubmit() {
				this.$refs.popupTaochan.close();
			},
			// 点击禁发区域
			handTag(item) {
				this.bans_area = item;
				this.$refs.popupJinfa.open('center');
			},
			editGoodsFn(item) {
				uni.navigateTo({
					url: '/pages/index/editGoods?id=' + item.id
				})
			},
			xiajia(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认下架吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// uni.showToast({
							// 	title: '下架成功'
							// })
							uni.$uv.http.post('/goods/goodsEditStatus', {
								id: id
							}).then(res => {
								// console.log(res);
								// let goodsName = this.products.in_name;
								uni.showToast({
									title: res.msg
								});
								setTimeout(() => {
									that.$router.go(0);
								}, 300);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 批量分佣
			allFenyong(id, commission_money) {
				uni.showToast({
					title: '开发中'
				});
				return false;
				this.goods_id = id;
				this.commission_money = commission_money;
				this.$refs.popupPiliangfy.open('center');
				
			},
			// 确认或取消分佣
			submitFYA() {
				let that = this;
				uni.$uv.http.post('/goods/goodsEditMoney', {
					id: this.goods_id,
					commission_money: this.commission_money
				}).then(res => {
					// console.log(res);
					// let goodsName = this.products.in_name;
					uni.showToast({
						title: res.msg
					});
					setTimeout(() => {
						that.$router.go(0);
					}, 300);
					this.$refs.popupPiliangfy.close();
				})
			},
			submitFY() {
				this.$refs.popupPiliangfy.close();
			},
			handAddagent(id) {
				let that = this;
				uni.showActionSheet({
					itemList: ['打开连接', '复制链接'],
					success: function(res) {
						// console.log(res,44444444);
						let te = uni.$my.goodsHost + id;
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url: '/pages/webview/webview?url=' + encodeURIComponent(te)
							});
						}
						if (res.tapIndex == 1) {
							that.copyLianJie(id);
						}
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
				// let test = uni.$my.currHost+'pages/register/register?invitId='+uni.$my.shopId;
				// uni.setClipboardData({
				// 	data: test, //需要字符串
				// 	success: function () {
				// 	  uni.showToast({
				// 		title: '已复制专属链接',
				// 		icon: 'success',
				// 		duration: 2000
				// 	  });
				// 	}
				//   });
			},
			// 复制链接
			copyLianJie(id) {
				// let test = uni.$my.currHost+'pages/register/register?invitId='+uni.$my.shopId;
				// console.log(id,7777777777);
				let test = uni.$my.goodsHost + id;
				console.log(test, 444444);
				// uni.setClipboardData({
				// 	data: test, //需要字符串
				// 	success: function() {
				// 		uni.showToast({
				// 			title: '已复制专属链接',
				// 			icon: 'success',
				// 			duration: 2000
				// 		});
				// 	}
				// });
				setTimeout(()=>{
				//#ifndef H5
					uni.setClipboardData({
						data: test, //需要字符串
						success: function () {
						  uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						  });
						},
						fail: (err) => {
							uni.showToast({
								title: err,
								icon: 'success',
								duration: 2000
							});
						}
					  });	
				//#endif
				//#ifdef H5
					let textarea = document.createElement("textarea")
						textarea.value = test
						textarea.readOnly = "readOnly"
						document.body.appendChild(textarea)
						textarea.select() // 选择对象
						textarea.setSelectionRange(0, test.length) //核心
						let result = document.execCommand("copy") // 执行浏览器复制命令
						if (result) {
							uni.showToast({
								title: '复制成功',
								duration: 2000
							});
						}
						textarea.remove()
				//#endif
				})
			},
			// 复制id
			handCopy(id) {
				// uni.setClipboardData({
				// 	data: id + '', //需要字符串
				// 	success: function() {
				// 		uni.showToast({
				// 			title: '复制成功',
				// 			icon: 'success',
				// 			duration: 2000
				// 		});
				// 	}
				// });
				let  test = id +'';
				setTimeout(()=>{
				//#ifndef H5
					uni.setClipboardData({
						data: id+'', //需要字符串
						success: function () {
						  uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						  });
						},
						fail: (err) => {
							uni.showToast({
								title: err,
								icon: 'success',
								duration: 2000
							});
						}
					  });	
				//#endif
				//#ifdef H5
					let textarea = document.createElement("textarea")
						textarea.value = test
						textarea.readOnly = "readOnly"
						document.body.appendChild(textarea)
						textarea.select() // 选择对象
						textarea.setSelectionRange(0, test.length) //核心
						let result = document.execCommand("copy") // 执行浏览器复制命令
						if (result) {
							uni.showToast({
								title: '复制成功',
								duration: 2000
							});
						}
						textarea.remove()
				//#endif
				})
			},
			// 立即申请
			handApply(id) {

			},
			init() {
				// console.log(typeof window);
				console.log(uni.$my.serverHost)
				uni.$uv.http.get('/index').then(res => {
					// this.bannerlist = res.data.swiper;
					// this.gridList = this.makeServerPicUrl(res.data.grid || '', 'pic')
					this.bannerlist = this.makeServerPicUrl(res.data.swiper || '', 'pic');
					// console.log(this.bannerlist);
					// this.adList = this.makeServerPicUrl(res.data.ad || '', 'pic')
					// this.tabList = res.data.tab || []
					// this.popAd = this.makeServerPicUrl(res.data.pop || '', 'pic')
					// if (!this.isEmpty(this.popAd) && !this.isReInit) {
					// 	this.openPopAd()
					// }
					// if (!this.isEmpty(this.tabList)) {
					// 	this.getTabData()
					// }
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			},
			// 把服务器上的图片链接都转为地址
			makeServerPicUrl(rowsArray, picField) {
				if (!this.isEmpty(rowsArray)) {
					// console.log(1111111);
					if (uni.$uv.test.array(rowsArray)) {
						for (let i = 0; i < rowsArray.length; i++) {
							// console.log(this.serverHost,2222222222);
							rowsArray[i][picField] = this.serverHost + rowsArray[i][picField]
						}
					} else if (uni.$uv.test.object(rowsArray)) {
						// console.log(this.serverHost,333333333333333);
						rowsArray[picField] = this.serverHost + rowsArray[picField]
					}
				}
				return rowsArray
			},
			goods() {
				uni.$uv.http.get('/goods/listCommission').then(res => {
					console.log(res);
					// this.bannerlist = res.data.swiper;

					this.products = this.makeServerPicUrl(res.data || '', 'main_pic')
				}).catch(e => {
					console.log(e)
				})
			},
			dumpPage(page, params, type) {
				// console.log(33333333333333);
				uni.$my.dumpPage(page, params, type)
			},
			// 生成海报
			Generateposter(item) {
				uni.showLoading({
					title: '生成中···'
				})
				this.rowOne = item;
				this.qrcodeUrl = uni.$my.goodsHost + item.id;
				this.$refs.popupPoster.open('center')
				uni.hideLoading()
			},

			PosterCancel() {
				this.$refs.popupPoster.close()

			},
			PosterHKCancel() {
				this.$refs.popupHK.close()

			},
			upimage(img){
				const nowToken = getToken();
				uni.uploadFile({
					url: '/dev-api/uploadPic', //仅为示例，非真实的接口地址
					filePath: img,
					name: 'file',
					header: {
						"Authorization": 'Bearer  ' + nowToken
					},
					formData: {
						img: 'file',
					},
					success: (uploadFileRes) => {
						let imgarr = []
						let res = JSON.parse(uploadFileRes.data);
						let url = this.serverHost + res.fileName;
						imgarr[0] = url
						uni.previewImage({ //图片预览
							current: 0,
							urls: imgarr
						});
					},
					fail: (err) => {
						alert(JSON.stringify(err))
					}
				});
			},
			Posterdown() {
				uni.showLoading({
					title: '生成中...'
				});
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.PosterHKCancel()
						setTimeout(()=>{
							this.upimage(res.tempFilePath)	
							uni.hideLoading()
						},800);
						
						console.log(res.tempFilePath);
						// uni.previewImage({ //图片预览
						// 	current: 0,
						// 	urls: [res.tempFilePath]
						// });
						
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			Posterdownx() {
				const nowToken = getToken();
				const content = this.$refs.Posterbox;
				const dom = document.getElementById('Posterbox')
				uni.showLoading({
					title: '生成中...'
				});
				html2canvas(dom, {
					// width: dom.clientWidth, //dom 原始宽度
					// height: dom.clientHeight,
					width:dom.outerWidth,
					height:dom.outerHeight,
					scrollY: 0,
					scrollX: 0,
					scale: 1.5,
					// dpi: 1300,
					dpi:window.devicePixelRatio *4,
					useCORS: true,
					allowTaint: true, // 是否允许跨源图像污染画布
				}).then((canvas) => {
					uni.hideLoading()
					//成功后调用返回canvas.toDataURL返回图片的imageData
					let imageData = canvas.toDataURL('image/png', 1)
					const arrayBuffer = uni.base64ToArrayBuffer(imageData);
					// #ifdef APP-PLUS
					const bitmap = new plus.nativeObj.Bitmap("img");
					bitmap.loadBase64Data(imageData, function() {
						const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
						bitmap.save(url, {
							overwrite: true, // 是否覆盖
							// quality: 100  // 取值范围为1-100，1表示使用最低的图片质量（保存后的图片文件最小）、100表示使用最高的图片质量（保存后的图片文件最大）； 默认值为50
						}, (i) => {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									})
									bitmap.clear()
								}
							});
						}, (e) => {
							uni.showToast({
								title: '图片保存失败',
								icon: 'none'
							})
							bitmap.clear()
						});
					}, (e) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
					// #endif

					// #ifdef H5 || MP-WEIXIN
					const fileName = 'image.png'
					// 将ArrayBuffer转换为Blob对象
					var arr = imageData.split(","),
						mime = arr[0].match(/:(.*?);/)[1],
						bstr = atob(arr[1]),
						n = bstr.length,
						u8arr = new Uint8Array(n);
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n);
					}
					// 将Blob对象转换成文件并下载到本地
					var blob = new Blob([u8arr], {
						type: mime
					});
					console.log(imageData, 'imageData');
					// 安卓环境
					if (uni.getSystemInfoSync().platform === 'android') {

						uni.hideLoading()
						this.$refs.popupPoster.close()
						uni.uploadFile({
							url: '/dev-api/uploadPic', //仅为示例，非真实的接口地址
							filePath: imageData,
							name: 'file',
							header: {
								"Authorization": 'Bearer  ' + nowToken
							},
							formData: {
								img: 'file',
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes, 'dsfsf----');
								let imgarr = []
								let res = JSON.parse(uploadFileRes.data);
								let url = this.serverHost + res.fileName;
								imgarr[0] = url
								uni.previewImage({ //图片预览
									current: 0,
									urls: imgarr
								});
							},
							fail: (err) => {
								alert(JSON.stringify(err))
							}
						});
					} else {
						var a = document.createElement('a');
						a.download = fileName;
						a.href = URL.createObjectURL(blob);
						a.click();
					}
					//#endif
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		padding-bottom: 100rpx;
	}

	.button {
		width: 128rpx;
		height: 50rpx;
		color: #fff;
		text-align: center;
		line-height: 50rpx;
		background: #FF600F;
		border-radius: 50rpx;

	}

	.swiper-item {
		width: 100%;
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.slot-wrap {
		padding: 0rpx 0rpx;
		width: 100%;
	}

	.search-box {
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 36rpx;
		height: 72rpx;
		width: 100%;
		padding: 0 0 0 12rpx;

		.search-input-box {
			input {
				width: 510rpx;
				// flex: 1;
			}
		}

		.image100,
		.img-box {
			width: 50rpx;
			height: 50rpx;
		}

		.search-btn {
			width: 128rpx;
			height: 60rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			background: $uni-color-primary;
			border-radius: 50rpx;
		}
	}

	.tab_box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;

		.tab_item {
			width: 25%;
			text-align: center;

			image {
				width: 74rpx;
				height: 74rpx;

			}
		}
	}

	.title-box {
		.title-des {
			width: 168rpx;
			height: 50rpx;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
			background: #F93A4A;
			border-radius: 24rpx 24rpx 24rpx 6rpx;
		}

		.u-title {
			letter-spacing: 6rpx;
		}
	}

	.product-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;

		.product-image-box {
			width: 260rpx;
			height: 260rpx;
			position: relative;

			.banner {
				width: 100%;
				height: 100%;
			}

			.ranking {
				width: 140rpx;
				height: 80rpx;
				position: absolute;
				left: -8rpx;
				top: 0;
			}
		}

		.product-conten {
			.copy {
				background-color: #04C15D;
				// background-color: $uni-color-primary;
				padding: 8rpx;
				border-radius: 6rpx;
				color: #fff;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.copyimage {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.flow {
				.Verticalline {
					width: 0px;
					height: 24rpx;
					border: 1px solid #ABABAB;
				}
			}

			.describe {
				color: #5D5D5D;
			}

			.price {
				color: #FF600F;
			}
		}

		.tag-item {
			padding: 6rpx 10rpx;
			border-radius: 4px;
			margin-bottom: 6rpx;
		}

		.warning {
			color: #BA692A;
			background-color: #FDF3E8;
		}

		.primary {
			color: #1456FE;
			background-color: #E6F0F9;
		}

		.error {
			color: #F93A4A;
			background-color: #FFEAE8;
		}
	}

	.tc-describe {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	.ellipsis-container {
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏超出容器的文本 */
		text-overflow: ellipsis;
		/* 在文本末尾添加省略号 */
		width: 420rpx;
		/* 设置容器的宽度 */
		color: #ABABAB;
	}

	.Jinfapopup {
		width: 650rpx;
		margin: 10px;

		.title {
			text-align: center;
			font-weight: 600;
			margin: 40rpx 0;
			font-size: 30rpx;
		}

		.content {
			text-align: center;
			color: #f00;
		}
	}

	// 套餐说明弹窗
	.popupTaochan {
		width: 650rpx;
		margin: 10px;

		.popupTaochan-top {
			display: flex;
			align-items: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
				margin: 18rpx 0;
			}
		}

		.popupTaochan-dic {
			&-title {
				min-width: 160rpx;
				font-weight: 600;
			}

			&-con {
				color: #666;
			}
		}
	}

	// 批量分佣弹窗
	.Piliangfypopup {
		width: 680rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		background-color: #fff;

		.title {
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			margin: 16rpx 0;
		}

		&-input {
			width: 80%;
			margin: 26rpx auto;
			padding: 8rpx;
			border: 1px solid #999;
			border-radius: 8rpx;

			input {
				padding-left: 8rpx;
				width: 100%;
			}
		}
	}

	.Posterpopup {
		width: 680rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		background-color: #007aff;

		&-image {
			// width: 600rpx;
			width: 100%;
			height: 600rpx;
			margin: auto;
		}

		&-code {
			display: flex;
			justify-content: center;
			margin: 30rpx 0;
		}
	}

	.PosterpopupHK {
		width: 680rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		min-height: 1000rpx;
		// background-color: #007aff;
		margin-top: -100rpx;

		&-image {
			// width: 600rpx;
			width: 100%;
			height: 1000rpx;
			margin: auto;
		}

		&-code {
			// display: flex;
			justify-content: center;
			margin: 30rpx 0;
			margin-left: 100rpx;
			margin-top: -302rpx;
		}
	}

	::v-deep .uni-navbar__header-btns-right {
		display: none;
	}

	::v-deep .uni-navbar__header-btns-left {
		display: none;
	}

	::v-deep .uni-navbar__header-container {
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .uni-navbar__header-container {
		padding: 0;
	}

	.boxGoods {
		// flex: 1; /* 每个.box平均分配空间 */
		text-align: center;
		/* 文字水平居中 */
		// border: 1px solid #000; /* 边框，为了清晰地显示每个盒子的边界 */
		padding: 3px;
		/* 一些内边距 */
	}

	.hk-shop {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 120rpx;
		color: #fff;
		position: fixed;
		right: 60rpx;
		bottom: 180rpx;
		background-color: #1678FF;
	}

	.boxGoodsBorder {}

	.container {
		position: relative;
		/* 其他样式 */
	}

	.floating-window {
		position: absolute;
		right: 20px;
		bottom: 20px;
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		/* 其他样式 */
	}
</style>